import Taro, {Component, Config} from '@tarojs/taro'
import { Image, View } from '@tarojs/components'
import './index.scss'
import { OSS } from "@/config/config"
import { getPage } from '@/api/productApi'
import recordImg from '@/market/assets/icon/integral-record.png'
import particularImg from '@/market/assets/icon/integral-particular.png'
import { toIntegralGoodsInfoPage, toIntegralRecordPage, toIntegralOrderListPage } from '@/utils/page_router'
import { showEmpty } from "@/utils/utils"
import {getBrand, getUserInfoStorage} from "@/utils/storage"
import { Loading, EmptyData, LoadMore } from "@/components/index"
import GoodsPrice from "@/market/components/goods-price/index"

export default class Index extends Component {
  state: any
  config: Config = {
    backgroundTextStyle: "dark",
    navigationBarTitleText: `${getBrand()}商城`,
  }

  constructor() {
    super(...arguments)
    this.state = {
      loading: true,
      page: 1,
      limit: 10,
      dataList: [],
      userInfo: getUserInfoStorage(),
      loadStatus: 'loading',
    }
  }

  componentDidMount () {
    this.getPage()
  }

  getPage() {
    const { page, limit, dataList, loadStatus } = this.state
    if (loadStatus === 'noMore') {
      return
    }
    getPage({ page, limit, saleStrategy: 'SCORE' }).then(({ data }) => {
      const { list, totalCount } = data
      this.setState({
        page: page + 1,
        dataList: page === 1 ? list : dataList.concat(list),
        loadStatus: (page * limit >= totalCount) ? 'noMore' : 'loading',
      }, () => {
        this.setState({
          loading: false
        })
      })
    })
  }

  render() {
    const { loading, dataList, loadStatus, userInfo } = this.state
    return (<View className='page'>
      {loading && <Loading/>}
      <View className='page-scroll'>
        <View className='page-head'>
          <Image src={`${OSS}/system/image/integral_bg.png`} className='head-bg'/>
          <View className='integral-box f-g-5 f-d-c'>
            <View className='integral-num bnn-number'>{userInfo.totalScore || 0}</View>
            我的{getBrand()}
          </View>
          <View className='tab-list d-f a-i-c j-c-b'>
            <View className='tab-item f-g-5' onClick={() => toIntegralRecordPage()}>
              <Image className='tab-icon' src={particularImg}/>
              <View className='tab-name'>{getBrand()}明细</View>
            </View>
            <View className='tab-item f-g-5' onClick={() => toIntegralOrderListPage()}>
              <Image className='tab-icon' src={recordImg}/>
              <View className='tab-name'>兑换记录</View>
            </View>
          </View>
        </View>
        <View className='page-body'>
          <View className='goods-list d-f f-w-w j-c-b'>
            {dataList.map(goods => {
              return (<View key={goods.id} className='goods-item d-f f-d-c thin-border' onClick={() => toIntegralGoodsInfoPage(goods.id)}>
                <Image src={goods.coverImg} className='goods-img'/>
                <View className='goods-box d-f f-d-c j-c-b'>
                  <View className='goods-name'>
                    <View className='name-text t-o-e-2'>{goods.name}</View>
                  </View>
                  <GoodsPrice sale={goods.salePrice} origin={goods.originPrice} isSku={goods.isSku}/>
                </View>
              </View>)
            })}
          </View>
          {!showEmpty(dataList, loadStatus) && <LoadMore status={loadStatus}/>}
          {showEmpty(dataList, loadStatus) && <View className='list-empty'><EmptyData/></View>}
        </View>
      </View>
    </View>)
  }
}
